<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 14:58:04
 * @LastEditors: yuxi
 * @LastEditTime: 2023-01-10 17:14:56
-->
<template>
  <div class="map-container">
    <MiningMap >
      <MiningTiandituLayer :ak="key" @ready="ready"></MiningTiandituLayer>
      <MiningVectorLayer :features="features"></MiningVectorLayer> 
    </MiningMap>
    <div id="mouse-position"></div>
  </div>
</template>

<script>
import MiningMap from 'mining-map/Map'
import MiningTiandituLayer from 'mining-map/Layers/TiandituLayer'
import MiningVectorLayer from 'mining-map/Layers/VectorLayer'
import { TiandituKey } from '@/config/config.js';

import Feature from 'ol/Feature';
// import Polygon from 'ol/geom/Polygon';
// import Point from 'ol/geom/Point';
import LineString from 'ol/geom/LineString';


import MousePosition from 'ol/control/MousePosition';
import { createStringXY } from 'ol/coordinate';
import {
  // OSM, 
  Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer1 } from 'ol/layer';
import {
  Style, Fill as FillStyle,
  Stroke as StrokeStyle
} from 'ol/style';
import GeoJSON from 'ol/format/GeoJSON'; 


const mousePositionControl = new MousePosition({
  coordinateFormat: createStringXY(4),
  projection: 'EPSG:4326',
  // comment the following two lines to have the mouse position
  // be placed within the map.
  className: 'custom-mouse-position',
  target: document.getElementById('mouse-position'),
});
export default {
  name: 'BaseLayer',
  title: '天地图',
  parentTitle: '图层',
  components: {
    MiningMap,
    MiningTiandituLayer,
    MiningVectorLayer
    // XYZLayer
  },
  data () {
    const feature = new Feature({
      geometry: new LineString([[0,0],[20, 20]]),
      name: 'My Polygon',
    });
    return {
      features: [
        feature
      ],
      key: TiandituKey
    }
  },
  methods: {
    ready (arg) {
      arg.map.addControl(mousePositionControl)

      // arg.map.addLayer(new TileLayer({
      //   source: new OSM(),
      // }))


      const styles = {
        'LineString': new Style({
          stroke: new StrokeStyle({
            color: 'green',
            width: 1,
          }),
        }),
        'MultiLineString': new Style({
          stroke: new StrokeStyle({
            color: 'green',
            width: 1,
          }),
        }),
        'MultiPolygon': new Style({
          stroke: new StrokeStyle({
            color: 'yellow',
            width: 1,
          }),
          fill: new FillStyle({
            color: 'rgba(255, 255, 0, 0.1)',
          }),
        }),
        'Polygon': new Style({
          stroke: new StrokeStyle({
            color: 'blue',
            lineDash: [4],
            width: 3,
          }),
          fill: new FillStyle({
            color: 'rgba(0, 0, 255, 0.1)',
          }),
        }),
        'GeometryCollection': new Style({
          stroke: new StrokeStyle({
            color: 'magenta',
            width: 2,
          }),
          fill: new FillStyle({
            color: 'magenta',
          }),
        }),
        'Circle': new Style({
          stroke: new StrokeStyle({
            color: 'red',
            width: 2,
          }),
          fill: new FillStyle({
            color: 'rgba(255,0,0,0.2)',
          }),
        }),
      };

      const styleFunction = function (feature) {
        return styles[feature.getGeometry().getType()];
      };

      // const geojsonObject = {
      //   'type': 'FeatureCollection',
      //   'crs': {
      //     'type': 'name',
      //     'properties': {
      //       'name': 'EPSG:3857',
      //     },
      //   },
      //   'features': [
      //     {
      //       'type': 'Feature',
      //       'geometry': {
      //         'type': 'Point',
      //         'coordinates': [0, 0],
      //       },
      //     },
      //     {
      //       'type': 'Feature',
      //       'geometry': {
      //         'type': 'LineString',
      //         'coordinates': [
      //           [4e6, -2e6],
      //           [8e6, 2e6],
      //         ],
      //       },
      //     },
      //     {
      //       'type': 'Feature',
      //       'geometry': {
      //         'type': 'LineString',
      //         'coordinates': [
      //           [4e6, 2e6],
      //           [8e6, -2e6],
      //         ],
      //       },
      //     },
      //     {
      //       'type': 'Feature',
      //       'geometry': {
      //         'type': 'Polygon',
      //         'coordinates': [
      //           [
      //             [-5e6, -1e6],
      //             [-3e6, -1e6],
      //             [-4e6, 1e6],
      //             [-5e6, -1e6],
      //           ],
      //         ],
      //       },
      //     },
      //     {
      //       'type': 'Feature',
      //       'geometry': {
      //         'type': 'MultiLineString',
      //         'coordinates': [
      //           [
      //             [-1e6, -7.5e5],
      //             [-1e6, 7.5e5],
      //           ],
      //           [
      //             [1e6, -7.5e5],
      //             [1e6, 7.5e5],
      //           ],
      //           [
      //             [-7.5e5, -1e6],
      //             [7.5e5, -1e6],
      //           ],
      //           [
      //             [-7.5e5, 1e6],
      //             [7.5e5, 1e6],
      //           ],
      //         ],
      //       },
      //     },
      //     {
      //       'type': 'Feature',
      //       'geometry': {
      //         'type': 'MultiPolygon',
      //         'coordinates': [
      //           [
      //             [
      //               [-5e6, 6e6],
      //               [-3e6, 6e6],
      //               [-3e6, 8e6],
      //               [-5e6, 8e6],
      //               [-5e6, 6e6],
      //             ],
      //           ],
      //           [
      //             [
      //               [-2e6, 6e6],
      //               [0, 6e6],
      //               [0, 8e6],
      //               [-2e6, 8e6],
      //               [-2e6, 6e6],
      //             ],
      //           ],
      //           [
      //             [
      //               [1e6, 6e6],
      //               [3e6, 6e6],
      //               [3e6, 8e6],
      //               [1e6, 8e6],
      //               [1e6, 6e6],
      //             ],
      //           ],
      //         ],
      //       },
      //     },
      //     {
      //       'type': 'Feature',
      //       'geometry': {
      //         'type': 'GeometryCollection',
      //         'geometries': [
      //           {
      //             'type': 'LineString',
      //             'coordinates': [
      //               [-5e6, -5e6],
      //               [0, -5e6],
      //             ],
      //           },
      //           {
      //             'type': 'Point',
      //             'coordinates': [4e6, -5e6],
      //           },
      //           {
      //             'type': 'Polygon',
      //             'coordinates': [
      //               [
      //                 [1e6, -6e6],
      //                 [3e6, -6e6],
      //                 [2e6, -4e6],
      //                 [1e6, -6e6],
      //               ],
      //             ],
      //           },
      //         ],
      //       },
      //     },
      //   ],
      // };

      const geojsonObject = {
        'type': 'FeatureCollection',
        'crs': {
          'type': 'name',
          'properties': {
            'name': 'EPSG:3857',
          },
        },
        'features': [ 
          {
            'type': 'Feature',
            'geometry': {
              'type': 'LineString',
              'coordinates': [
                [0, 0],
                [20, 20],
              ],
            },
          },  
        ],
      };

      const vectorSource1 = new VectorSource({
        features: new GeoJSON().readFeatures(geojsonObject),
      });
      console.log(vectorSource1)


//       const vectorSource = new VectorSource({
//   features: new GeoJSON().readFeatures(geojsonObject),
// });
      const vectorSource = new VectorSource({
        features: this.features
      });
    //   vectorSource.addFeature(
    //     new Feature({
    //   geometry: new LineString([[0,0],[20, 20]]),
    //   labelPoint: new Point([0,0]),
    //   name: 'My Polygon',
    // })
    //   )

      const vectorLayer = new VectorLayer1({
        source: vectorSource,
        style: styleFunction,
      });
      console.log(vectorLayer)

      // arg.map.addLayer(vectorLayer)
    }
  }

}
</script>

<style>
body,
html {
  padding: 0;
  margin: 0;
}

.map-container {
  width: 100%;
  height: 100vh;
}
</style>